<template>
    <div class="exportPage">
        <parentChild-template 
        :tableParams="tableParams"
        :queryParams="queryParams"
        :childTableParams="childTableParams"
        :buttonsChild="buttonsChild"
        @selectedData="selectedData"
        @saveHandler="saveHandler"
        @childEditHandler='childEditHandler'
        @editHandler$after='editHandler$after'
        @addHandler$after = 'addHandler$after'
        @childDelHandler$before='childDelHandler$before'
        @formCommHandler='formCommHandler'
        > 
        <template slot='table_before_son'>
           <el-table-column
            fixed="right"
            label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">导出</el-button>
                </template>
            </el-table-column>
        </template>
        </parentChild-template>
        <!-- <standard-template 
            :queryParams="queryParams"
            :tableParams="tableParams"
            @selectedData="selectedData"
            @saveHandler="saveHandler"
            @formCommHandler='formCommHandler'
            @delHandler$before='delHandler$before'
            @delHandler$after='delHandler$after'
            @deleteHandler='deleteHandler'
        >
        </standard-template> -->
        <el-dialog :title="popTitle" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-row :gutter="5">
                    <el-col :span="8" v-for="(item,index) in columnList" :key="index">
                        <el-form-item :label="item.label" :label-width="formLabelWidth" v-if="item.type=='input'" :prop="item.prop">
                            <el-input v-model="form[item.prop]" :placeholder="item.placeholder"></el-input>
                        </el-form-item>
                        <el-form-item :label="item.label" :label-width="formLabelWidth" v-else :prop="item.prop">
                            <el-select v-model="form[item.prop]" :placeholder="item.placeholder">
                                <el-option :label="citem.type" :value="citem.value" v-for="(citem,cindex) in item.typeList" :key="cindex"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveBtn('ruleForm')">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="popChildTitle" :visible="dialogFormChildVisible">
            <el-form :model="form" :rules="childRules" ref="ruleChildForm">
                <el-row :gutter="5">
                    <el-col :span="8" v-for="(item,index) in childColumnList" :key="index">
                        <el-form-item :label="item.label" :label-width="formLabelWidth" v-if="item.type=='input'" :prop="item.prop">
                            <el-input v-model="form[item.prop]" :placeholder="item.placeholder"></el-input>
                        </el-form-item>
                        <el-form-item :label="item.label" :label-width="formLabelWidth" v-else :prop="item.prop">
                            <el-select v-model="form[item.prop]" :placeholder="item.placeholder">
                                <el-option :label="citem.type" :value="citem.value" v-for="(citem,cindex) in item.typeList" :key="cindex"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormChildVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveChildBtn('ruleChildForm')">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog title="导出" :visible="dialogExportVisible">
            <el-form :model="form" :rules="exportRules" ref="exportForm">
                <el-form-item label="参数" :label-width="formLabelWidth" prop="params">
                    <el-input type="textarea" v-model="form.params" placeholder="请输入到处参数"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogExportVisible = false">取 消</el-button>
                <el-button type="primary" @click="exportBtn('exportForm')">保存</el-button>
            </div>
        </el-dialog>
    </div>
    
</template>
<script>
import {exportListPage, queryApi, exportColumnList,api_formData} from '@/api/api'
// import EditTable from '@/components/baseComponents/EditTable'
// import StandardTemplate from '../components/StandardTemplate'
import parentChildTemplate from '../components/parentChildTemplate'
import validate from '@/assets/js/validators'
import EditTable from '@/components/EditTemplate'
export default{
    name: 'exportPage',
    components: {
        EditTable,
        // StandardTemplate,
        parentChildTemplate
    },
    inject: ["reload"],
    data() {
        return {
            dialogExportVisible:false,
            formLabelWidth:'120px',
            form:{},
            childform:{},
            popTitle:'新增',
            popChildTitle:'新增',
            dialogFormVisible:false,
            dialogFormChildVisible:false,
            //查询区域数据
            queryParams: {
                maxHeight:'50px',
                // 搜索元素渲染
                searchRender: [
                    { field: 'exportCode', label: '配置编码', type: '$input', placeholder: '请输入配置编码', span:8},
                    { field: 'exportName', label: '配置名称', type: '$input', placeholder: '请输入配置名称', span:8,},
                    { field: 'moduleCode', label: '所属模块', type: '$select', placeholder: '请选择所属模块', span:8, options: [{ label: 'BI', value: '0' }]},
                    { 
                        align: 'right',
                        span: 24, 
                        type: '$buttons',
                        children: [
                            {type: 'del', content: '删除', status: 'primary', size:"mini"},
                            {type: 'edit', content: '修改', status: 'primary', size:"mini"},
                            {type: 'add', content: '新增', status: 'primary', size:"mini"},
                            {type: 'reset', content: '重置', status: 'primary', size:"mini"},
                            {type: 'search', content: '查询', status: 'primary', size:"mini"}
                        ] 
                    }
                ],
                // 搜索数据绑定
                queryData: {
                    'exportCode':null,
                    'exportName':null,
                    'moduleCode':null
                }
            },
            exportRules:{
                 "params":[{ required: true, message: '必填项', trigger: 'blur' }],
            },
            rules:{
                "exportCode":[{ required: true, message: '必填项', trigger: 'blur' }],
                "exportName":[{ required: true, message: '必填项', trigger: 'blur' }],
                "moduleCode":[{ required: true, message: '必填项', trigger: 'blur' }],
                "compressFlag":[{ required: true, message: '必填项', trigger: 'blur' }],
                "fileDataCount":[{ required: true, message: '必填项', trigger: 'blur' }],
                "exportTitle":[{ required: true, message: '必填项', trigger: 'blur' }],
                'showHeader':[{ required: true, message: '必填项', trigger: 'blur' }],
                "showFooter":[{ required: true, message: '必填项', trigger: 'blur' }],
                "lockHeader":[{ required: true, message: '必填项', trigger: 'blur' }],
                "lockColumns":[{ required: true, message: '必填项', trigger: 'blur' }],
                "exportFileName":[{ required: true, message: '必填项', trigger: 'blur' }],
                "apiClass":[{ required: true, message: '必填项', trigger: 'blur' }],
                "apiMethod":[{ required: true, message: '必填项', trigger: 'blur' }],
                "entityClass":[{ required: true, message: '必填项', trigger: 'blur' }],
                'createdByName':[{ required: true, message: '必填项', trigger: 'blur' }],
                "remark":[{ required: true, message: '必填项', trigger: 'blur' }],
            },
            childRules:{
                "columnCode":[{ required: true, message: '必填项', trigger: 'blur' }],
                "columnName":[{ required: true, message: '必填项', trigger: 'blur' }],
                "dictCode":[{ required: true, message: '必填项', trigger: 'blur' }],
            },
            childColumnList:[
                {prop: 'columnCode', label: '列编码',type:"input",},
                {prop: 'columnName', label: '列名称',type:"input",},
                {prop: 'dictCode', label: '小代码',type:"input",},
                {prop: 'dateColumnFormat', label: '日期格式',type:"input",},
                {prop: 'columnSeq', label: '列顺序',type:"input",},
                {prop: 'expType', label: '表达式类型',type:"select",typeList:[{"type":'常量',value:'常量'},{"type":'Beanshell表达式',value:'Beanshell表达式'},{"type":'自定义方法',value:'自定义方法'}],},
                {prop: 'expression', label: '表达式',type:"input",},
                {prop: 'remark', label: '备注',type:"input",},
            ],
            columnList:[
                    {prop: 'exportCode', label: '导出配置编码', type:"input"},
                    {prop: 'exportName', label: '导出配置名称', type:"input"},
                    {prop: 'moduleCode', label: '所属模块', type:"select",typeList:[{"type":'BI',value:'BI'},],},
                    {prop: 'compressFlag', label: '启用压缩', type:"select",typeList:[{"type":'是',"value":1},{"type":"否","value":0}]},
                    {prop: 'showHeader', label: '显示页头', type:"select",typeList:[{"type":'是',"value":1},{"type":"否","value":0}]},
                    {prop: 'fileDataCount', label: '单文件数据量', type:"input",},
                    {prop: 'exportTitle', label: '标题', type:"input",},
                    {prop: 'showFooter', label: '显示页尾', type:"select",typeList:[{"type":'是',"value":1},{"type":"否","value":0}]},
                    {prop: 'lockHeader', label: '锁定表头', type:"select",typeList:[{"type":'是',"value":1},{"type":"否","value":0}]},
                    {prop: 'lockColumns', label: '锁定列', type:"select",typeList:[{"type":'是',"value":1},{"type":"否","value":0}]},
                    {prop: 'exportFileName', label: '导出文件名称', type:"input",},
                    {prop: 'apiClass', label: '接口类', type:"input",},
                    {prop: 'apiMethod', label: '方法', type:"input",},
                    {prop: 'entityClass', label: '实体类', type:"input",},
                    {prop: 'createdByName', label: '创建人', type:"input",},
                    {prop: 'remark', label: '备注', type:"input",},
            ],
            tableParams:{
                id:'exportSid',
                apiName:exportListPage,
                tableStyle: 1, //1--主子表格上下布局  2---主子表格左右布局
                // 风格主题
                tooltip:"dark",
                // 表头数据
                columns:[
                    {prop: 'selection', label: '序号', align: 'center',type:"selection",fixed:'fixed',},
                    {prop: 'exportCode', label: '导出配置编码', align: 'center',type:"",isShow:false,disabled:'disabled'},
                    {prop: 'exportName', label: '导出配置名称', align: 'center',type:"",isShow:true},
                    {prop: 'moduleCode', label: '所属模块', align: 'center',type:"",isShow:true,typeList:[{"type":'BI',value:'BI'},],},
                    {prop: 'compressFlag', label: '启用压缩', align: 'center',type:"",isShow:true,typeList:[{"type":'是',"value":1},{"type":"否","value":0}]},
                    {prop: 'showHeader', label: '显示页头', align: 'center',type:"",isShow:true,typeList:[{"type":'是',"value":1},{"type":"否","value":0}]},
                    {prop: 'fileDataCount', label: '单文件数据量', align: 'center',type:"",isShow:true,},
                    {prop: 'exportTitle', label: '标题', align: 'center',type:"",isShow:true,},
                    {prop: 'showFooter', label: '显示页尾', align: 'center',type:"",isShow:true,typeList:[{"type":'是',"value":1},{"type":"否","value":0}]},
                    {prop: 'lockHeader', label: '锁定表头', align: 'center',type:"",isShow:true,typeList:[{"type":'是',"value":1},{"type":"否","value":0}]},
                    {prop: 'lockColumns', label: '锁定列', align: 'center',type:"",isShow:true,typeList:[{"type":'是',"value":1},{"type":"否","value":0}]},
                    {prop: 'exportFileName', label: '导出文件名称', align: 'center',type:"",isShow:true,},
                    {prop: 'apiClass', label: '接口类', align: 'center',type:"",isShow:true,},
                    {prop: 'apiMethod', label: '方法', align: 'center',type:"",isShow:true,},
                    {prop: 'entityClass', label: '实体类', align: 'center',type:"",isShow:true,},
                    {prop: 'createdByName', label: '创建人', align: 'center',type:"",isShow:true,},
                    {prop: 'remark', label: '备注', align: 'center',type:"",isShow:true,},
                ],
                tableData:[],
                // 分页
                pageSizeOpt: ['10','20','50','100','200'],
                pageNum:1,
                pageSize:10,
                // 表格高度最大值
                maxHeight:500, //上下布局主子表250 单表450
            },
            selectedDataList:[],
            buttonsChild: {
                align: 'right',
                buttons:[
                    {type: 'childEdit', content: '修改', status: 'primary', size:"mini"},
                    {type: 'childAdd', content: '新增', status: 'primary', size:"mini"},
                    {type: 'childDel', content: '删除', status: 'primary', size:"mini"}
                ]
            },
            //子表格数据
            childTableParams: {
                tableStyle: 1,
                id:'exportColumnSid',
                // 表格接口地址  详细地址在api配置
                isShowChild: true, //主子表子表中必填项  首次不加载为true
                apiName:exportColumnList,
                // 风格主题
                tooltip:"dark",
                // 表头数据
                columns:[
                    {prop: '', label: '', align: 'center',type:"selection",},
                    {prop: 'columnCode', label: '列编码', align: 'center',type:"",},
                    {prop: 'columnName', label: '列名称', align: 'center',type:"",},
                    {prop: 'dictCode', label: '小代码', align: 'center',type:"",},
                    {prop: 'dateColumnFormat', label: '日期格式', align: 'center',type:"",},
                    {prop: 'columnSeq', label: '列顺序', align: 'center',type:"",},
                    {prop: 'expType', label: '表达式类型', align: 'center',type:"",},
                    {prop: 'expression', label: '表达式', align: 'center',type:"",},
                    {prop: 'remark', label: '备注', align: 'center',type:"",},
                ],
                rowDataJson:{},
                // 表格数据
                tableData: [],
                // 分页
                pageSizeOpt: ['10','20','50','100','200'],
                pageNum:1,
                pageSize:10,
                // 表格高度最大值
                maxHeight:1000,
            },
        }
    },
    methods:{
        tableRowClassNameColor({row,rowIndex}){
            if (rowIndex%2 == 0) {
                return 'Edit-warning-row';
            } else{
                return 'Edit-success-row';
            }
            return '';
        },
        //表格新增/删除/修改后的数据保存操作
        saveHandler(data) {
            // console.log(data)
            console.log("这里写保存的逻辑----保存成功")
        },
        addHandler$after(data){
            this.selectedDataList = data;
            this.dialogFormChildVisible = true;
            this.popChildTitle='新增'
        },
        editHandler$after(row){
            if(row.length == 0){
                this.$alert('请勾选要修改的数据！');
            }else if(row.length > 1){
                this.$alert('只能选择一条数据修改');
            }else{
                this.form = row[0];
                this.dialogFormVisible = true;
                this.popTitle='修改'
            }
        },
        childEditHandler(row){
            this.form = row[0];
            this.dialogFormChildVisible = true;
            this.popChildTitle='修改'
        },
        //表单事件
        formCommHandler(data) {
            if(data.type == "add"){ //表格保存操作
                this.dialogFormVisible = true;
                this.popTitle='新增'
            }
        },
        // 子项删除
        childDelHandler$before(data){
            let that = this;
            queryApi('/bs-md-export-column/deleteByPrimaryKeys',{"reqBody":data}).then(res => {
                if(res.retCode=='0000000'){
                    that.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.reload()
                }
            })
        },
        deleteHandler(data){
            let that = this;
            queryApi('/bs-md-export/deleteByPrimaryKey',{"reqBody":data[0].exportSid}).then(res => {
                if(res.retCode=='0000000'){
                    that.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.reload()
                }
            })
        },
        handleClick(row){
            this.dialogExportVisible = true;
        },
        exportBtn(name){
            let that = this;
            this.$refs[name].validate((valid) => {
                if (valid) {
                    api_formData('/bs-md-export/exportExcel',that.form).then(res => {
                        const blob = new Blob([res.data], {
                            type: "application/vnd.ms-excel;charset=UTF-8"
                        });
                        const fileName = res.headers["content-disposition"].match(/filename=(\S*).xlsx/)[1];
                        // let formatString = escape(fileName);
                        let fname = decodeURI(fileName)+'.xlsx'
                        let link = document.createElement('a');
                        link.style.display = 'none'
                        link.href = URL.createObjectURL(blob);
                        link.setAttribute('download',fname);
                        link.click();
                        link = null;
                        this.$message.success('导出成功');
                        this.dialogExportVisible = false;
                    })
                }else{
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        selectedData(row){
            console.log(row);
            this.selectedDataList = row;
        },
        saveChildBtn(name){
            let that = this;
            let flag = false;
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if(that.form.exportSid==''||that.form.exportSid==null){
                        that.form.exportSid = that.selectedDataList[0].exportSid;
                        flag = true;
                    }
                    queryApi('/bs-md-export-column/saveData',{"reqBody":[that.form]}).then(res => {
                        if(res.retCode=='0000000'){
                            this.dialogFormChildVisible = false;
                            if(!flag){
                                this.reload()
                            }
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        saveBtn(formName){
             this.$refs[formName].validate((valid) => {
                if (valid) {
                    
                    queryApi('/bs-md-export/saveData',{"reqBody":[this.form]}).then(res => {
                        if(res.retCode=='0000000'){
                            this.dialogFormVisible = false;
                            this.reload()
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    },
    created(){
    }
}
</script>
<style scoped>
.exportPage ::v-deep .demo-form-inline .el-form-item{
    /* margin-bottom: 0px; */
    margin-right: 0px!important;
}
</style>
